<template>
	<view class="container">
		<view class="menu">
			 <uni-segmented-control :current="current" :values="value" @clickItem="onClickItem" styleType="button" activeColor="#2B9939"></uni-segmented-control>
		</view>
		<scroll-view class="field">
			<view class="layout" v-for="(item,index) in pets" :key="item._id">
				<view class="box">
					<view class="pic">
						<image :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
					</view>
					<view class="text">{{item.content}}</view>
					<view class="author">——{{item.author}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="float">
			<view class="item" @click="refresh">
				<uni-icons type="refresh" size="30" color="#888"></uni-icons>
			</view>
			<view class="item" @click="goTop">
				<uni-icons type="arrow-up" size="30" color="#888"></uni-icons>
			</view>
		</view>
		<view class="loadMore">
			<uni-load-more status="loading" show-icon="true"></uni-load-more>
		</view>
	</view >
</template>
<script setup>
import { ref,computed } from 'vue';
const pets = ref([]); 
const current = ref(0);
const classify = [{key:"all",value:"全部"},{key:"dog",value:"狗狗"},{key:"cat",value:"猫咪"}];
const value = computed(()=>classify.map(item=>item.value));
const onPreview = function (index) {
	let urls = pets.value.map(item=>item.url);
	uni.previewImage({
		current:index,
		urls:urls,
	})
}
const refresh = function(){
	uni.startPullDownRefresh()
}
const goTop = function(){
	uni.pageScrollTo({
		scrollTop:0,
		duration:100,
	})
}
const onClickItem = function(e){
	current.value = e.currentIndex,
	pets.value = [],
	network();
}
function network(){
	uni.showLoading();
	uni.request({
		url:"https://tea.qingnian8.com/tools/petShow",
		data:{
			size:5,
			type:classify[current.value].key,
		},
		header:{
				'access-key':"7758520"
		}
	}).then(res=>{
		if(res.data.errCode===0){
				pets.value = [...pets.value,...res.data.data];
		}else if(res.data.errCode===400){
			uni.showToast({
				title:res.data.errMsg,
				icon:"none",
			})
		}
	}).catch(err=>{
		uni.showToast({
			title:"请求有误",
			icon:"none",
		})
	}).finally(()=>{
		uni.hideLoading();
		uni.stopPullDownRefresh();
	})
}

onReachBottom(()=>{
	network();
})
onPullDownRefresh(()=>{
	current.value = 0;
	pets.value = [];
	network();
})
network();
</script>
<style lang="scss" scoped>
	.container{
		.menu{
			width: 100%;
		
			
		}
		.field{
			height: 50%;
			.layout{
				background-color:white;
				padding:50rpx;
				.box{
					background-color: #5555;
					margin-bottom:60rpx;
					box-shadow:0 10rpx 30rpx rgba(0,0,0,0.08);
					border-radius:20rpx ;
					overflow:hidden;
					.pic{
						image{
							width:100%;
						}
					}
					.text{
						padding:30rpx;
						color:"#333";
						font-size:36;
					}
					.author{
						padding:0rpx 30rpx 30rpx ;
						color:#888;
						text-align:right;
					}
				}
			}
		}
		.float{
			position: fixed;
			right:30rpx;
			bottom:80rpx;
			padding-bottom: env(safe-area-inset-bottom);//防止手机虚拟home键的干扰
			.item{
				width: 90rpx;
				height: 90rpx;
				background-color: rgba(255,255,255,0.6);
				border-radius: 50%;
				color:gray;
				margin:20rpx;
				display:flex;
				justify-content: center;
				align-items: center;
				border:1px solid #eee;
			}
		}
		.loadMore{
			padding-bottom:calc( env(safe-area-inset-bottom) + 50rpx);
		}
	}
</style>